import { Card, message, Modal } from "antd";
import { useEffect, useState } from "react";
import { useRequest } from "ahooks";
import { create_embedding, delete_embedding, split_data } from "../../../api/request";
import CustomSelect from "../../../components/CustomSelect";
import MarkdownRender from "../../../components/MarkdownRender";

interface Props {
    text: string;
    open: boolean;
    level: number;
    onChange: (open: boolean) => void;
}

export default (props: Props) => {
    const { text, open, onChange, level } = props;
    const { data, run: splitDataRun } = useRequest(split_data, {
        manual: true
    })
    const [createId, setCreateId] = useState<number>()

    const { run: createRun } = useRequest(create_embedding, {
        manual: true,
        onSuccess: (result) => {
            if (result.code == 200) {
                onChange(false)
                message.success('分块成功')
            } else {
                message.error('分块失败')
            }
        }
    })

    useEffect(() => {
        if (open) {
            splitDataRun(text, level)
        }
    }, [open, level])

    return <Modal
        title="分块"
        open={open}
        width={900}
        okText="确定分块"
        onCancel={() => onChange(false)}
        onOk={() => {
            if (data && createId) {
                createRun({ document: data.data, id: createId })
            }
            else {
                message.error("请选择文档")
            }
        }} >
        <CustomSelect
            value={createId}
            placeholder="请选择文档"
            onChange={(id: number) => setCreateId(id)}
            className="w-[200px]" />
        <div className="rounded-lg" style={{ maxHeight: 600, overflow: "auto", marginTop: 10, border: '1px solid #D9D9D9' }}>
            {data && data.data.map((test, index: number) =>
                <Card className="p-4 m-4" key={index}>
                    <MarkdownRender markdown={test} />
                </Card>)}
        </div>
    </Modal>
};